Attributes

All HTML elements can have attributes. Attributes provide additional information about an element, and are always specified in the start tag.
Attributes usually come in name/value pairs like name="value"
Here are some popular ways attributes are used that we'll be covering in the sections to come!

Images

• The “source” (URL or file location) from where an image is taken through the src attribute
• The image’s alternative text (often a description for those with accessibility needs) is provided through the alt attribute
• The image size can be adjusted through the width and height attributes
• Images are self-closing - you add a slash at the end, instead of another </img> tag as we have seen before

In the example below, we are using a JPG image called “nefertiti”.

<img
  src="images/nefertiti.jpg"
  alt="A smiling Labrador Retriever"
  width="480"
  height="320"
/>

Links

Links are essential in HTML, as the Web was initially designed to be an information network of documents “linked” between each other - you navigate from one document to another by clicking on links.

The “HyperText” part of HTML defines what kind of links we use: hypertext links, a.k.a hyperlinks.

In HTML, links are inline elements written with the <a> tag. The href attribute (hypertext reference) is used to define the destination of the link (where you navigate to when you click).

There are 3 types of destinations you can define:

• anchor targets, to navigate within the same page
• relative URLs, usually to navigate within the same website
• absolute URLs, usually to navigate to another website

You can also use additional attributes besides a and href:

• specify the relationship between the current and linked document with the rel attribute
• specify where to open the linked document with the target attribute

In the example below, we are setting the URL destination to The Labrador Club website, preventing this website from being able to access the window.opener property and ensuring it runs in a separate process with the noopener rel value. Finally we are requesting that the link open in a new window instead of the same one with the _blank target value.

<a href="https://thelabradorclub.com" rel="noopener" target="_blank"
  >Join The Labrador Retriever Club</a>

Comments

If you write something in your code without changing how your website will be displayed by the browser, you're writing comments.

Comments will be ignored by the browser and are only helpful to us people who write the code. They can help with readability both for yourself in the future, as well as others who are looking at your code, such as teammates and managers.

A comment starts with <!-- and ends with -->.

Self-Enclosing Elements

Some HTML elements only have an opening tag:

<!-- line-break -->
<br />
<!-- image -->
<img src="//dog.com/image.png" alt="Description" />
<!-- text input -->
<input type="text" />

Because they don’t have a closing tag and consequently can’t contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.

The HTML Element Rabbit Hole

For more information on HTML elements, see here.